<template>
  <div class="category">
    <div class="top">
      <div class="detail">
        <div>搜索</div>
        <div>属于你的餐品</div>
      </div>
    </div>
    <div class="center">
      <div class="flex h-full">
        <el-scrollbar class="menu">
          <el-menu v-for="(item, index) in menu.list" :key="index" :default-active="defaultMenu + ''">
            <el-menu-item :index="item.category_id + ''" :key="index" @click="handleMenuSelect(item)">{{
            item.title
            }}</el-menu-item>
          </el-menu>
        </el-scrollbar>
        <div class="flex-1" v-loading="loading">
          <template v-if="foods.length">
            <FoodBox v-if="defaultActive" :item="defaultActive" :foods="foods"></FoodBox>
          </template>
          <el-empty v-if="foods.length === 0" description="暂无商品" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import userStore from "@/store/userStore";
import categoryStore from "@/store/categoryStore";
import { FoodsCategory } from "@/types/food";
import FoodBox from "./components/Box.vue";

import {
  computed,
  onActivated,
  onMounted,
  reactive,
  ref,
  toRefs,
  watch,
} from "vue";
import { AfoodCate } from "@/api";
import { useRoute } from "vue-router";
interface MenuItem {
  path: string;
  title: string;
}
interface MenuData {
  list: Array<FoodsCategory>;
}
const user = userStore();
const route = useRoute();
const category = categoryStore();
let defaultActive = ref<FoodsCategory>();
const innerHeight = computed(() => user.browser.innerHeight);
const menu: MenuData = reactive({
  list: [],
});
const defaultMenu = ref(0)
const foods = ref([])
const loading = ref(false);
const scrollbar = ref();
// 获取分类
const handleGetCategory = () => {
  return AfoodCate.page().then((data) => {
    category.setCategoryList(data.result.items);
    menu.list = data.result.items;
    if (data.result.items.length) {
      let id = data.result.items[0].category_id;
      defaultMenu.value = id
      defaultActive.value = data.result.items[0];
      handleGetList(id);
    }

  });
};
// 获取分类下的明细
const handleGetList = (id: string | number) => {
  loading.value = true;
  AfoodCate.categoryDetail({ id })
    .then((date) => {
      foods.value = date.result.items;
    })
    .finally(() => {
      loading.value = false;
    });
};
onMounted(() => {
  handleGetCategory();
});
watch(
  () => route.params.type,
  (val) => {
    if (val) {
      if (scrollbar.value) scrollbar.value.setScrollTop(0);
    }
  },
  { immediate: true }
);
const handleMenuSelect = (item: FoodsCategory) => {
  defaultActive.value = item;
  defaultMenu.value = item.category_id;
  handleGetList(item.category_id);
};
</script>

<style lang="scss">
.category {
  height: calc(v-bind(innerHeight) - 80px);
  background: no-repeat top/100% 38% url("@/assets/img/type-food.png");

  .top {
    height: 28%;
    object-fit: fill;
    display: flex;
    align-items: center;

    .detail {
      margin-left: 100px;
      font-size: 25px;
      color: #fff;
    }
  }

  .center {
    height: 72%;
    background-color: #fff;
    border-radius: 22px 22px 0 0;
    overflow: hidden;

    .menu {
      height: 100%;
      width: 100px;
      text-align: center;
    }
  }
}

@media (min-width: 768px) {
  .category {
    background: no-repeat 0 -60%/100% 80% url("@/assets/img/type-food.png");

    .top {
      display: none;
    }

    .center {
      height: 100%;
      border-radius: 0;
    }
  }
}
</style>
